
<template>
<!--  <div id="map"></div>-->

    <el-tabs class="demo-tabs" @tab-click="handleClick" >
      <el-tab-pane label="今日签到" name="0" >
          <div>
            <div style="display: inline-block;">
              <el-progress type="dashboard" :percentage="baifenbi">
                <template #default="{ percentage }">
                  <span class="percentage-value">已签到:{{ok}}</span>
                  <span class="percentage-label">未签到:{{not}}</span>
                </template>
              </el-progress>
            </div>
          </div>
          <div id="todaySignInfo">
            <el-collapse accordion  >
              <el-collapse-item :title="item.user.userName" :name="index" v-for="(item,index) in todayInfo" >
              <div>
                <el-descriptions v-if="item.todaySignNumber!=0" column="1">
                  <el-descriptions-item >今日已签到{{item.todaySignNumber}}次</el-descriptions-item>
                  <el-descriptions-item v-for="userSignToday in item.userSignToday">
                    <div class="userTodayInfo">
                        <div class="addressInfo">签到地点:</div>
                        <div class="signAddress">{{userSignToday.position}}</div>
                        <div class="signImgInfo">签到图片:</div>
                        <div class="signImg" v-for="img in userSignToday.img">
                          <img :src="img" alt="">
                        </div>
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
                <el-descriptions v-if="item.todaySignNumber==0" column="1">
                  <el-descriptions-item >今日尚未签到</el-descriptions-item>
                </el-descriptions>
              </div>
              </el-collapse-item>
            </el-collapse>
          </div>
      </el-tab-pane>
      <el-tab-pane label="全部记录" name="second" v-if=" store.role">
        <div>
          <div style="display: inline-block;float: right;margin-bottom:  1%">
            <el-button size="default" type="primary" @click="exportSign">导出</el-button>
          </div>
        </div>
        <el-table :data="allInfo" style="width: 100%; margin-bottom: 10px" height="600" row-key="id" border default-expand-all>
          <el-table-column fixed  prop="userName" label="签到人"/>
          <el-table-column prop="position" label="签到地址"/>
          <el-table-column prop="hospitalName" label="客户名称"/>
          <el-table-column prop="remark" label="备注" show-overflow-tooltip/>
          <el-table-column prop="signDate" label="签到日期"/>
          <el-table-column prop="signTime" label="签到时间"/>
          <el-table-column label="操作" width="300">
            <template #default="scope" >
              <el-button size="small" type="primary" @click="lookSign(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="float: right">
            <el-pagination
                v-model:current-page="pageNum"
                v-model:page-size="pageSize"
                background layout="prev, pager, next" :total="total"
                @current-change="handleCurrentChange"
            />
        </div>
      </el-tab-pane>
    </el-tabs>
    <div v-if="onSignFlag">
      <el-dialog v-model="onSignFlag" width="900" title="签到详情">
        <el-descriptions
            class="margin-top"
            :title="onSigninfo.userName+' 于:'+onSigninfo.createTime"
            :column="3"
            :size="size"
            border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                 目标客户
              </div>
            </template>
            {{onSigninfo.hospitalName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
               签到位置
              </div>
            </template>
            {{onSigninfo.position}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                签到日期
              </div>
            </template>
            {{onSigninfo.signDate}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                签到时间
              </div>
            </template>
            {{onSigninfo.signTime}}
          </el-descriptions-item>
          <el-descriptions-item width="80">
            <template #label>
              <div class="cell-item">
                详细地址
              </div>
            </template>
           {{onSigninfo.address}}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions column="1"
                         border >
          <el-descriptions-item label="签到备注" >
            {{onSigninfo.remark}}
          </el-descriptions-item>
          <el-descriptions-item label="附加图片" >
            <div class="signImg" v-for="img in onSigninfo.img">
              <img :src="img" alt="">
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </div>
    <div v-if="exportFlag">
      <el-dialog v-model="exportFlag" width="500" title="请选择要导出的时间段">
        <div class="block">
          <el-date-picker
              v-model="exporttimes"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="截止日期"
          />
        </div>
        <div style="padding: 1rem">
          <el-button size="small" @click="exporttimes=false">取消</el-button>
          <el-button size="small" type="primary" @click="confirmExport()">确认</el-button>
        </div>


      </el-dialog>
    </div>

</template>
<script setup lang="ts">
import {exportSignBytimes, getAllSigns, getDeptSignToday, getSignByid} from "../../api/sign";
import { format } from 'date-fns';
import AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAPI，可以避免异步加载、重复加载等常见错误加载错误
import { shallowRef } from '@vue/reactivity'
import {onMounted, ref} from "vue";
import {useUsersStore} from "../../store/userInfo.ts";
import {ElMessage} from "element-plus";
const map = shallowRef(null);
const store = useUsersStore();
const { name, role, token } = store;
let todayInfo = ref([]);
let ok = ref(0);
let not = ref(0);
let baifenbi = ref(0);
let allInfo = ref([])
let onSignFlag = ref(false);
let onSigninfo = ref({});
let exportFlag = ref(false);
let exporttimes = ref('');
let pageNum = ref(1);
let pageSize = ref(8);
let total = ref(0)
let baseUrl =import.meta.env.VITE_HTTP;
onMounted(()=>{
  queryTodayInfo();
  queryAllInfo();
})
const queryTodayInfo = (async ()=>{
  let res = await getDeptSignToday();
  ok.value = 0;
  not.value = 0;
  baifenbi.value = 0;
  todayInfo.value = res.data;
  const countWithImg = res.data.reduce((count, s) => {
    if (s.todaySignNumber !== 0) {
      ok.value++;
      if (s.userSignToday.length > 0) {
        s.userSignToday.forEach(ust => {
          ust.img = ust.img !== null ? ust.img.split(",") : null;
        });
      }
    } else {
      not.value++;
    }
    return count + (s.todaySignNumber !== 0 ? 1 : 0);
  }, 0);

  baifenbi.value = (countWithImg / res.data.length * 100).toFixed(2);
})
const queryAllInfo =(async ()=>{
  if (store.role){
    let res = await getAllSigns({pageNum: pageNum.value,pageSize :pageSize.value});
    allInfo.value = res.data.list;
    total.value = res.data.total;
  }
})

const lookSign = (async (row)=>{
  onSignFlag.value=true
  let res = await getSignByid({id: row.id});
  if (res.data.img != null ){
    res.data.img = res.data.img !== null ? res.data.img.split(",") : null;
  }
  onSigninfo.value =res.data
})
const exportSign = (async ()=>{
  exportFlag.value =true;
  exporttimes.value=""
})
const confirmExport = (async ()=>{
  let beginandend = exporttimes.value;
  if (!beginandend || beginandend.length !== 2) {
    ElMessage.error("请选择开始时间和结束时间");
    return;
  }
  let [beginTime, endTime] = beginandend.map((time) =>
      format(time, "yyyy-MM-dd HH:mm:ss")
  );
    let res = await exportSignBytimes({ begin: beginTime, end: endTime });
    if (res.code == 200) {
      ElMessage.success("正在导出");
      const fileName = encodeURIComponent(res.data.msg);
      const deleteFlag = true;
      const downloadUrl = `${import.meta.env.VITE_HTTP}/common/download?fileName=${fileName}&delete=${deleteFlag}`;
      window.location.href = downloadUrl;
      exportFlag.value = false;
      exporttimes.value = "";
    } else {
      ElMessage.error(res.data);
    }
})
const handleCurrentChange = async (val: number) => {
  pageNum.value = val;
  await queryAllInfo()
}
</script>

<style scoped>
#map{
  padding:0;
  margin: 0;
  width: 50%;
  height: 50vh;
}
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 1.2rem;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 1rem;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 400px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
#todaySignInfo{
  width:60%;
  margin: 0 auto;
}
.signAddress{
  font-size:1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

</style>
